<template name="anniver-toast">
	<view class="anniverToast">
		<view>
			<view class="toastHead">
				<view @tap="cancel">取消</view>
				<view>纪念日</view>
				<view @tap="submitAnn">完成</view>
			</view>
			<view class="toastCon">
				<view v-if="annInfo.id != 0"><input type="text" v-model="annInfo.title" placeholder="请输入名字" /></view>
				<view v-if="annInfo.id == 0"><input type="text" v-model="annInfo.title" placeholder="请输入名字" disabled /></view>
				<view>
					<view>日期</view>
					<picker mode="date" :value="annInfo.date" @change="bindDateChange">
						<view class="uni-input">
							{{date ? date : annInfo.date}}
							<text class="iconfont icon-you"></text>
						</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "anniver-toast",
		props: {
			annInfo: {
				type: Object,
				default() {
					return []
				}
			},
		},
		data() {
			return {
				title: '',
				date: ''
			}
		},
		onLoad() {
		},
		methods:{
			// 返回上一页
			goBack(){
				uni.navigateBack();
			},
			
			/**
			 * @author smallfour
			 * @description 选择时间
			 */
			bindDateChange:function(e){
				this.date = e.target.value
			},
			
			/**
			 * @author smallfour
			 * @description 取消
			 */
			cancel:function(){
				this.$emit("FcloseToast");
			},
			
			/**
			 * @author smallfour
			 * @description 完成
			 */
			submitAnn:function(){
				this.annInfo.id ? this.exitAnn() : this.addAnn();
			},
			
			/**
			 * @author smallfour
			 * @description 纪念日新增
			 */
			addAnn:function(){
				if(!this.annInfo.title){
					this.msg('请输入标题');
					return false;
				}
				let obj = {
					title:this.annInfo.title,
					date:this.date ? this.date : this.annInfo.date
				}
				this.$api.add_Anniver(obj).then(res => {
					if(res.code == 200){
						this.msg('添加成功');
						this.$emit("FcloseToast");
					}
				})
			},
			
			/**
			 * @author smallfour
			 * @description 纪念日修改
			 */
			exitAnn:function(){
				let obj = {
					id:this.annInfo.id,
					title:this.annInfo.title,
					date:this.date ? this.date : this.annInfo.date
				}
				this.$api.anniverDay(obj).then(res => {
					if(res.code == 200){
						this.msg('修改成功');
						this.$emit("FcloseToast");
					}
				})
			},
			
			/**
			 * @author smallfour
			 * @description 获取时间
			 */
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.anniverToast{
		position: fixed;
		background-color: rgba(0,0,0,0.3);
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 2;
		color:#000000;
	}
	.anniverToast>view{
		position: absolute;
		bottom: 0;
		height: 60vh;
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		.toastHead{
			display: flex;
			height: 96rpx;
			line-height: 96rpx;
			padding: 0 30rpx;
			background: rgb(247,250,255);
			view{
				flex:1;
			}
			view:nth-child(2){
				text-align: center;
			}
			view:nth-child(3){
				text-align: right;
			}
		}
		.toastCon{
			margin: 0 30rpx;
		}
		.toastCon>view{
			height: 96rpx;
			line-height: 96rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			input{
				height: 96rpx;
				line-height: 96rpx;
			}
			text{
				padding-left: 8rpx;
			}
		}
	}
</style>
